<template>
  <div class="product">
    <div class="product-content-head">
      <nuxt-link to="/product">
        <div
          class="product-content-head-text"
        >
          商品
        </div>
      </nuxt-link>

      <div class="product-content-head-icon" />
      <div class="product-content-head-detils-text">
        商品详情
      </div>
    </div>
    <div class="product-wrap">
      <div class="product-content">
        <div class="product-content-data">
          <div class="product-content-data-swiper">
            <img
              :src="imglarge.image_url"
              alt=""
              class="product-content-data-swiper-large"
            >
            <div class="product-content-data-swiper-small">
              <div class="product-content-data-swiper-small-item-wrap">
                <div
                  v-for="item in imgsmall"
                  :key="item.image_id"
                  class="product-content-data-swiper-small-item"
                >
                  <img
                    :src="item.thumbnail_url"
                    alt=""
                    class="product-content-data-swiper-small-item-img"
                    @click="swiperTab(item)"
                  >
                </div>
              </div>
              <div
                class="product-content-data-swiper-small-next"
                @click="swiperNuxt"
              >
                <img
                  src="~assets/img/right-icon-active.png"
                  alt=""
                >
              </div>
            </div>
          </div>
          <div class="product-content-data-right">
            <div class="product-content-data-name">
              {{ productData.product_name }}
            </div>
            <div class="product-content-data-city">
              所在地<span>{{ productData.hospital.user_area }}</span>
            </div>
            <div class="product-content-data-price">
              <div class="product-content-data-price-left">
                <div class="product-content-data-price-left-wrap">
                  <div class="product-content-data-original_price">
                    价格 <span>￥{{ productData.packages[packagesIndex].sale.original_price }}</span>
                  </div>
                  <div class="product-content-data-selling_price">
                    容猫价 <p>￥</p><span>{{ productData.packages[packagesIndex].sale.selling_price }}</span>
                  </div>
                </div>
              </div>
              <div class="product-content-data-price-right">
                {{ productData.place_count }}人已购买
              </div>
            </div>
            <!-- 优惠卷 -->
            <!-- <div class="product-content-data-coupon">
              <div class="product-content-data-coupon-Apptext">
                APP专享
              </div>
              <div class="product-content-data-coupon-item">
                <div class="product-content-data-coupon" />
              </div>
            </div> -->
            <div class="product-content-data-package">
              <div class="product-content-data-package-text">
                选择套餐
              </div>
              <div class="product-content-data-package-item-wrap">
                <div
                  v-for="(item,index) in productData.packages"
                  :key="item.package_id"
                  :class="{active:index==packagesIndex}"
                  class="product-content-data-package-item"
                  @click="choice(index)"
                >
                  {{ item.package_name }}
                </div>
              </div>
            </div>
            <div class="product-content-data-payment">
              <div class="product-content-data-payment-text">
                支付方式
              </div>
              <div class="product-content-data-payment-content">
                预约金：<span class="product-content-data-payment-content-deposit_price">￥{{ productData.packages[packagesIndex].deposit_price }}</span> 到店再付：<span class="product-content-data-payment-content-to_pay_price">￥{{ productData.packages[packagesIndex].to_pay_price }}</span>
              </div>
            </div>
            <div class="product-content-data-button">
              <nuxt-link to="/aboutus">
                <div class="product-content-data-button-consultation">
                  咨询医院
                </div>
              </nuxt-link>
              <nuxt-link to="/aboutus">
                <div class="product-content-data-button-purchase">
                  立即购买
                </div>
              </nuxt-link>
            </div>
          </div>
        </div>
        <div class="product-content-project-wrap">
          <div class="product-content-project-head">
            <div
              class="product-content-project-text"
              :class="{'active1':active==='商品详情'}"
              @click="tab('商品')"
            >
              商品详情
            </div>
            <div
              class="product-content-project-text"
              :class="{'active1':active==='医生信息'}"
              @click="tab('医生')"
            >
              医生信息
            </div>
            <div
              v-if="caseNum"
              class="product-content-case"
              :class="{'active1':active==='相关案例'}"
              @click="tab('案例')"
            >
              相关案例 ({{ caseNum }})
            </div>
          </div>
          <div v-if="active==='商品详情'" class="product-content-project-details">
            <div
              v-if="productData.packages[packagesIndex].package_detail.matter"
              class="product-content-project-price-list-wrap"
            >
              <div class="product-content-project-price-list-title">
                <div class="product-content-project-price-list-title-icon" />
                <div class="product-content-project-price-list-title-text">
                  项目价格表
                </div>
              </div>
              <div class="product-additional-costs-list-table-title-box">
                <div class="product-additional-costs-list-table-title-wrap">
                  <div class="product-additional-costs-list-table-title">
                    <div>品牌</div>
                    <div>次数</div>
                    <div>医生级别</div>
                    <div>容猫价格</div>
                  </div>
                </div>
                <div class="product-additional-costs-list-table-wrap">
                  <div class="product-additional-costs-list-table">
                    <div class="product-additional-costs-list-line">
                      {{ productData.packages[packagesIndex].package_detail.matter.name||'无' }}
                    </div>
                    <div v-if="productData.packages[packagesIndex].package_detail.num" class="product-additional-costs-list-line">
                      {{ productData.packages[packagesIndex].package_detail.num||'无' }}
                    </div>
                    <div v-if="productData.packages[packagesIndex].package_detail.doctor.doctor_title" class="product-additional-costs-list-line">
                      {{ productData.packages[packagesIndex].package_detail.doctor.doctor_title||'无' }}
                    </div>
                    <div v-if="productData.packages[packagesIndex].selling_price" class="product-additional-costs-list-line">
                      {{ productData.packages[packagesIndex].selling_price ||'无' }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="product-content-project-additional">
              <div class="product-content-project-additional-title">
                <div class="product-content-project-additional-title-icon" />
                <div class="product-content-project-additional-title-text">
                  额外费用 <span>(此费用不包含在项目内)</span>
                </div>
              </div>
              <div class="product-content-project-additional-table-content">
                <div
                  v-for="(item,index) in productData.extra_charges"
                  :key="index"
                  class="product-content-project-additional-table-content-item"
                >
                  <div class="product-content-project-additional-table-content-item-left">
                    {{ item.name||'' }}
                  </div>
                  <div class="product-content-project-additional-table-content-item-right">
                    {{ item.value }}
                  </div>
                </div>
              </div>
            </div>
            <div class="product-content-project-details-data">
              <div class="product-content-project-details-data-title">
                <div class="product-content-project-details-data-title-icon" />
                <div class="product-content-project-details-data-title-text">
                  图文详情
                </div>
              </div>
              <!-- eslint-disable-next-line vue/no-v-html -->
              <div class="product-content-project-details-data-content" v-html="productData.product_detail" />
            </div>
          </div>
          <div v-if="active==='医生信息'" class="product-content-hospital_and_doctor">
            <div class="product-content-doctor">
              <ProductDoctorList :doctor-data="doctorData" />
            </div>
            <div class="product-content-line" />
            <div class="product-content-hospital">
              <ProductHospital :hospital-data="hospitalData" />
            </div>
          </div>
          <div v-if="active==='相关案例'" class="product-content-diary">
            <DiaryList :diary-data="diaryData" />
          </div>
        </div>
      </div>
      <div class="product-content-right">
        <div class="product-content-title">
          <div class="product-content-title-text">
            相关推荐
          </div>
          <nuxt-link to="/product">
            <div class="product-content-title-See">
              <div class="product-content-title-See-text">
                更多
              </div>
              <div class="product-content-title-See-icon" />
            </div>
          </nuxt-link>
        </div>
        <div class="product-content-right-wrap">
          <div v-for="item in productRecommData" :key="item.projectId" class="product-content-right-item">
            <ProjectList :project-data="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getProductData, getHospitalData, getDoctorData, getdiaryData, getProductRecommData } from '@/api/productDetails'
import { imgnode } from '@/utils/util'
import ProductDoctorList from '@/components/productDoctor'
import ProductHospital from '@/components/productHospital'
import DiaryList from '@/components/diaryList'
import ProjectList from '@/components/projectList'
export default {
  components: {
    ProductDoctorList,
    ProductHospital,
    DiaryList,
    ProjectList
  },
  async asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    const [productData, diaryData, productRecommData] = await Promise.all([
      getProductData(params.details).then(res => {
        return res.data
      }),
      getdiaryData(params.details, 200).then((res) => {
        return res.data
      }),
      getProductRecommData(params.details, 3).then(res => {
        return res.data
      })
    ])
    return {
      productData,
      diaryData,
      productRecommData
    }
  },
  data() {
    return {
      imgsmall: [],
      // 大图片默认显示第一张
      imglarge: {},
      imgObject: {},
      packagesIndex: 0,
      active: '商品详情',
      hospitalData: {},
      doctorData: {},
      caseNum: 0
    }
  },
  computed: {

  },
  created() {
    this.caseNum = this.diaryData.length
    this.imgsmall = this.productData.images.slice(0, 4)
    this.imglarge = this.productData.images[0]
    this.gethospital()
  },
  mounted() {
    imgnode('.product-content-project-details-data-content')
  },
  methods: {
    swiperTab(i) {
      this.imglarge = i
    },
    gethospital() {
      getHospitalData(this.productData.hospital.user_id).then(res => {
        this.hospitalData = res.data
      })
      getDoctorData(this.productData.packages[this.packagesIndex].doctor.user_id).then(res => {
        this.doctorData = res.data
      })
    },
    swiperNuxt() {
      this.imgsmall.forEach((item, ind) => {
        if (item.image_id === this.imglarge.image_id) {
          if (this.imgsmall[ind + 1]) {
            this.imgObject = this.imgsmall[ind + 1]
          } else {
            this.imgObject = this.imgsmall[0]
          }
        }
      })
      this.imglarge = this.imgObject
    },
    choice(ind) {
      this.packagesIndex = ind
    },
    tab(str) {
      switch (str) {
        case '商品':
          this.active = '商品详情'
          break
        case '医生':
          this.active = '医生信息'
          break
        case '案例':
          this.active = '相关案例'
          break
      }
    }
  },
  head() {
    return {
      title: this.productData.product_name + '_容猫医美',
      meta: [
        { hid: 'description',
          name: 'description',
          content: `${this.productData.hospital.user_name}为您推荐${this.productData.product_name}，容猫优惠价格：${this.productData.packages[this.packagesIndex].sale.selling_price}元，采用美迪塑品牌，全程由${this.productData.packages[this.packagesIndex].doctor.user_name}医师为您贴心服务`
        }, {
          name: 'keywords', content: `${this.productData.hospital.user_name},${this.productData.packages[this.packagesIndex].doctor.user_name},${this.productData.packages[this.packagesIndex].package_detail.matter ? this.productData.packages[this.packagesIndex].package_detail.matter.name : ''}`
        }, {
          'http-equiv': 'mobile-agent', content: 'format=html5', url: `https://m.rongcat.com/product/${this.$route.params.details}`
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.product {
  width: 100%;
  background: rgba(246, 246, 246, 1);
  padding-bottom: 20px;
  .product-wrap {
    width: 1190px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
  }
}
.product-content-head {
  width: 1190px;
  height: 54px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding-top: 8px;
}
.product-content-head-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-left: 30px;
}
.product-content-head-text:hover {
  cursor: pointer;
}
.product-content-head-detils-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(80, 76, 255, 1);
  line-height: 20px;
}
.product-content-head-icon {
  width: 4px;
  height: 8px;
  background: url("~assets/img/right-icon.png") center center no-repeat;
  background-size: 100% 100%;
  margin-left: 10px;
  margin-right: 10px;
}
.product-content {
  width: 840px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
}
.product-content-data {
  width: 100%;
  display: flex;
  margin-left: 10px;
  margin-top: 10px;
  .product-content-data-swiper {
    width: 360px;
    .product-content-data-swiper-large {
      width: 360px;
      height: 360px;
    }
    .product-content-data-swiper-small {
      width: 360px;
      display: flex;
      justify-content: space-between;
      .product-content-data-swiper-small-item-wrap {
        display: flex;
      }
      .product-content-data-swiper-small-item:hover{
        cursor: pointer;
      }
      .product-content-data-swiper-small-item {
        margin-right: 10px;
      }
      .product-content-data-swiper-small-item-img {
        width: 68px;
        height: 68px;
        border-radius: 4px;
      }
      .product-content-data-swiper-small-next:hover{
        cursor: pointer;
      }
      .product-content-data-swiper-small-next {
        width: 48px;
        height: 68px;
        background: rgba(246, 246, 246, 1);
        border-radius: 4px;
        line-height: 68px;
        text-align: center;
        -moz-user-select: none; /*mozilar*/
        -webkit-user-select: none; /*webkit*/
        -ms-user-select: none; /*IE*/
        user-select: none;
      }
    }
  }
  .product-content-data-right {
    width: 100%;
    margin-left: 10px;
    padding-right: 10px;
    .product-content-data-name {
      font-size: 18px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 25px;
    }
    .product-content-data-city {
      font-size: 12px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 17px;
      margin-top: 8px;
      margin-left: 11px;
      > span {
        margin-left: 32px;
      }
    }
    .product-content-data-price {
      width: 450px;
      height: 54px;
      display: flex;
      justify-content: space-between;
      background: rgba(246, 246, 246, 1);
      border-radius: 4px;
      margin-top: 12px;
      .product-content-data-original_price {
        font-size: 12px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
        margin-top: 6px;
        margin-left: 11px;
        > span {
          margin-left: 44px;
          font-size: 12px;
          color: rgba(153, 153, 153, 1);
          line-height: 14px;
          text-decoration: line-through;
        }
      }
      .product-content-data-selling_price {
        font-size: 12px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
        margin-top: 6px;
        margin-left: 11px;
        > span {
          font-size: 18px;
          font-weight: 600;
          color: rgba(255, 59, 88, 1);
          line-height: 15px;
        }
        > p {
          font-size: 12px;
          font-weight: 600;
          color: rgba(255, 59, 88, 1);
          line-height: 15px;
          display: inline-block;
          margin-left: 32px;
        }
      }
      .product-content-data-price-right {
        font-size: 12px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 17px;
        margin-top: 29px;
        margin-right: 10px;
      }
    }
    // 优惠卷
    .product-content-data-coupon {
      font-size: 12px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 17px;
      margin-left: 11px;
      margin-top: 27px;
      display: flex;
    }
    .product-content-data-package {
      display: flex;
      align-items: center;
      margin-left: 11px;
      .product-content-data-package-text {
        font-size: 12px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
        margin-top: 19px;
      }
      .product-content-data-package-item-wrap {
        margin-left: 20px;
        display: flex;
        flex-wrap: wrap;
        margin-top: 19px;
      }
      .product-content-data-package-item {
        padding: 3px 12px;
        background: rgba(255, 255, 255, 1);
        border-radius: 12px;
        border: 1px solid rgba(246, 246, 246, 1);
        font-size: 12px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 17px;
        margin-right: 10px;
      }
      .product-content-data-package-item:hover {
        cursor: pointer;
      }
      .active {
        color: rgba(80, 76, 255, 1);
        border: 1px solid rgba(80, 76, 255, 1);
      }
    }
    .product-content-data-payment {
      display: flex;
      align-items: center;
      margin-top: 16px;
      margin-left: 10px;
      .product-content-data-payment-text {
        font-size: 12px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
      }
      .product-content-data-payment-content {
        width: 376px;
        height: 36px;
        background: rgba(255, 238, 218, 1);
        border-radius: 4px;
        margin-left: 15px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(181, 137, 106, 1);
        line-height: 36px;
        padding-left: 10px;
        .product-content-data-payment-content-deposit_price {
          font-size: 16px;
          font-weight: 600;
          color: rgba(255, 59, 88, 1);
          line-height: 22px;
        }
        .product-content-data-payment-content-to_pay_price {
          font-size: 14px;
          font-weight: 600;
          color: rgba(181, 137, 106, 1);
          line-height: 20px;
        }
      }
    }
    .product-content-data-button {
      display: flex;
      margin-left: 74px;
      margin-top: 18px;
      .product-content-data-button-consultation:hover{
        cursor: pointer;
      }
      .product-content-data-button-consultation {
        width: 160px;
        height: 36px;
        background: rgba(255, 59, 88, 0.08);
        border: 1px solid rgba(255, 59, 88, 1);
        font-size: 12px;
        font-weight: 400;
        color: rgba(225, 19, 50, 1);
        line-height: 17px;
        text-align: center;
        line-height: 36px;
      }
      .product-content-data-button-purchase:hover{
        cursor: pointer;
      }
      .product-content-data-button-purchase {
        width: 160px;
        height: 36px;
        background: rgba(255, 59, 88, 1);
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        line-height: 36px;
        text-align: center;
        margin-left: 10px;
      }
    }
  }
}
.product-content-project-wrap {
  margin-top: 20px;
  .product-content-project-head {
    width: 100%;
    height: 48px;
    border-top: 1px solid rgba(246, 246, 246, 1);
    border-bottom: 1px solid rgba(246, 246, 246, 1);
    display: flex;
    align-items: center;
  }
  .product-content-project-text {
    width: 112px;
    height: 50px;
    border-right: 1px solid rgba(246, 246, 246, 1);
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 50px;
  }
  .product-content-project-text:hover {
    cursor: pointer;
  }
  .active1 {
    color: rgba(80, 76, 255, 1);
  }
}

.product-content-case {
  width: 112px;
  height: 50px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 50px;
  text-align: center;
}
.product-content-case:hover {
  cursor: pointer;
}
.product-content-project-details {
  width: 100%;
  padding-left: 31px;
  padding-top: 22px;
  padding-right: 28px;
  .product-content-project-price-list-title {
    display: flex;
    align-items: center;
    .product-content-project-price-list-title-icon {
      width: 2px;
      height: 12px;
      background: rgba(41, 186, 181, 1)
        linear-gradient(
          140deg,
          rgba(244, 105, 253, 1) 0%,
          rgba(80, 76, 255, 1) 100%
        );
      border-radius: 2px;
    }
    .product-content-project-price-list-title-text {
      font-size: 16px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
      margin-left: 6px;
    }
  }
  .product-additional-costs-list-table-title-box {
    margin-top: 11px;
  }
  .product-additional-costs-list-table-title-wrap {
    width: 100%;
    .product-additional-costs-list-table-title {
      width: 100%;
      display: flex;
      border: 1px solid rgba(246, 246, 246, 1);
      > div {
        width: 25%;
        height: 42px;
        line-height: 42px;
        font-size: 12px;
        text-align: center;
        border-right: 1px solid rgba(246, 246, 246, 1);
      }
      > div:last-of-type {
        border-right: 0;
      }
    }
  }
  .product-additional-costs-list-table-wrap {
    margin: -1px 0;
    .product-additional-costs-list-table {
      display: flex;
      border: 1px solid rgba(246, 246, 246, 1);
      border-bottom: 0;
      .product-additional-costs-list-line {
        width: 25%;
        height: 42px;
        line-height: 42px;
        border-right: 1px solid rgba(246, 246, 246, 1);
        font-size: 12px;
        text-align: center;
      }
      .product-additional-costs-list-line:last-of-type {
        border-right: 0;
      }
    }
    .product-additional-costs-list-table:last-of-type {
      border-bottom: 1px solid rgba(246, 246, 246, 1);
    }
  }
}
.product-content-project-additional {
  margin-top: 20px;
  .product-content-project-additional-title {
    display: flex;
    align-items: center;
    .product-content-project-additional-title-icon {
      width: 2px;
      height: 12px;
      background: rgba(41, 186, 181, 1)
        linear-gradient(
          140deg,
          rgba(244, 105, 253, 1) 0%,
          rgba(80, 76, 255, 1) 100%
        );
      border-radius: 2px;
    }
    .product-content-project-additional-title-text {
      font-size: 16px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
      margin-left: 6px;
      > span {
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;
      }
    }
  }
  .product-content-project-additional-table-content {
    width: 100%;
    border: 1px solid #f6f6f6;
    border-bottom: 0;
    margin-top: 10px;
    .product-content-project-additional-table-content-item {
      display: flex;
      .product-content-project-additional-table-content-item-left {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        width: 50%;
        height: 42px;
        text-align: center;
        line-height: 42px;
        border-right: 1px solid #f6f6f6;
        border-bottom: 1px solid #f6f6f6;
      }
      .product-content-project-additional-table-content-item-right {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 20px;
        width: 50%;
        height: 42px;
        text-align: center;
        line-height: 42px;
        border-bottom: 1px solid #f6f6f6;
      }
    }
  }
}
.product-content-project-details-data-title{
  display: flex;
  align-items: center;
  margin-top: 20px;
  .product-content-project-details-data-title-icon{
      width: 2px;
      height: 12px;
      background: rgba(41, 186, 181, 1)
        linear-gradient(
          140deg,
          rgba(244, 105, 253, 1) 0%,
          rgba(80, 76, 255, 1) 100%
        );
      border-radius: 2px;
  }
  .product-content-project-details-data-title-text{
    margin-left: 6px;
    font-size:16px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height:22px
  }
}
 .product-content-project-details-data-content{
   width: 100%;
    margin-top:12px ;
    img{
      width: 100%;
    }
  }
  .product-content-hospital_and_doctor{
    height: 390px;
    .product-content-line{
      width: 100%;
      height: 1px;
      background: #f6f6f6;
      margin-top: 24px;
      margin-bottom: 24px;
    }
  }
  .product-content-diary{
    margin-top: 20px;
  }
.product-content-right {
  width: 340px;
  height: 1300px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  margin-left: 10px;
  margin-top: 0;
  .product-content-title {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .product-content-title-text {
      margin-left: 16px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
    }
    .product-content-title-See:hover{
      cursor: pointer;
    }
    .product-content-title-See {
      display: flex;
      font-size: 16px;
      font-weight: 600;
      color: rgba(216, 216, 216, 1);
      line-height: 22px;
      align-items: center;
      margin-right: 19px;
      .product-content-title-See-icon {
        width: 8px;
        height: 8px;
        background: url("~assets/img/more-icon.png") center center no-repeat;
        background-size: 100% 100%;
        margin-left: 4px;
      }
    }
  }
  .product-content-right-wrap{
    width: 285px;
    margin: 0 auto;
  }
}
</style>
